<template>
  <div class="panel-container">
    <panelTitle title="超时" sub-title="OVERTIME">
      <div class="more-btn">更多></div>
    </panelTitle>

    <div class="panel-content">
      <div class="pic"></div>
      <div>
        <div class="count">{{ ThousandWithNumber(output) }}</div>
        <div class="count-desc">超时人员</div>
      </div>
    </div>
  </div>
</template>

<script setup name="time-out">
import { ref } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'

import panelTitle from '../panel-title/index.vue'

import { ThousandWithNumber } from '@/views/01/utils/help.js'

const timeoutCount = ref(0)

const output = useTransition(timeoutCount, {
  duration: 1500,
  transition: TransitionPresets.easeInOutCubic
})

setTimeout(() => {
  timeoutCount.value = 5412
}, 1000)
</script>

<style lang="scss" scoped>
.panel-content {
  display: flex;
  padding-left: 1.666667vw;
  padding-top: 2.239583vw;

  // width: 456px;
  width: 100%;
  // height: 224px;
  height: 11.666667vw;
  box-sizing: border-box;

  background: linear-gradient(
    360deg,
    rgba(56, 185, 255, 0.16) 0%,
    rgba(56, 185, 255, 0) 100%
  );
  border: 1px solid;
  border-image: linear-gradient(
      360deg,
      rgba(56.000000461936, 185.00000417232513, 255, 1),
      rgba(56.000000461936, 185.00000417232513, 255, 0.11999999731779099)
    )
    1 1;
  border-top: none;

  .pic {
    width: 7.1875vw;
    height: 7.1875vw;
    background-color: pink;
    margin-right: 0.520833vw;
  }

  .count {
    font-family:
      Alimama ShuHeiTi,
      Alimama ShuHeiTi;
    font-weight: 700;
    font-size: 2.5vw;
    line-height: 2.5vw;
    text-shadow: 0px 0px 0.833333vw rgba(111, 0, 0, 0.6);
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(90deg, #ca396a 0%, #f37277 100%);
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    background-clip: text;
    -webkit-text-fill-color: transparent; /*给文字设置成透明*/

    margin-top: 1.041667vw;
  }

  .count-desc {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 1.25vw;
    line-height: 1.25vw;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    background-clip: text;
    -webkit-text-fill-color: transparent; /*给文字设置成透明*/

    margin-top: 0.625vw;
  }
}

.more-btn {
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: 700;
  font-size: 0.729167vw;
  text-shadow: 0px 0px 0.416667vw rgba(102, 255, 255, 0.46);
  text-align: right;
  font-style: normal;
  text-transform: none;

  margin-right: 0.520833vw;

  background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);
  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  background-clip: text;
  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
}
</style>
